'use client'
require('dotenv').config()
import React, {useEffect} from 'react';
import {Button, Image} from "antd";
import axios from "axios";
import {useTelegram} from "@/app/hooks/useTelegram";

interface TourPageProps {
    src?: string;
    name?: string;
    description?: string;
    price?: number;
    id?: number;
}

export default function TourPage({id, name, src, description, price}: any) {
    const baseUrl = process.env.BASE_URL
    const {onToggleButton, tg, user, queryId} = useTelegram();
    useEffect(() => {
        tg.ready();
    }, [tg]);
    const handleClick = () => {
        onToggleButton();
        return axios.post(
            `${baseUrl}/api/booking/`,
            {
                headers: {
                    Authorization: "Bearer your-permanent-token"
                },
                data: {
                    tour_id: id,
                    user_id: user.id,
                }
            }
        )
    }
    return (
        <div>
            <h1>{name}</h1>
            <Image src={src} alt={"Tour photo"}/>
            <p>{description}</p>
            <Button
                type="primary"
                onClick={handleClick}
            >
                Забронировать
            </Button>
        </div>
    );
};